<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    聊天记录：<br/>
    <textarea id="chat_content" readonly style="height: 400px;width: 600px;"></textarea>
    <br/>输入框
    <textarea id="in_content" style="height: 100px; width: 100px;"></textarea>
    <button onclick="send_message()">发送</button>
    <script src="js/jquery.min.js"></script>
    <script>

        var socketUrl = new WebSocket("ws://127.0.0.1:8080/testAPI");
        socketUrl.onopen = function() {
            console.log("建立连接");
            socketUrl.send("上线");
        }
        socketUrl.onmessage = function(result) {
            console.log("收到消息" + result.data)
            jQuery("#chat_content").append(result.data+"\n");
        }
        socketUrl.onerror = function() {
            console.log("连接异常");
        }
        socketUrl.onclose = function() {
            console.log("连接关闭");
            socketUrl.send("你的好友[" + name.val() + "]下线了");
        }
       
 
        function send_message() {
            var msg = jQuery("#in_content");
            if(msg.val() == "") {
                alert("输入为空");
                return;
            }
            socketUrl.send("用户:" + msg.val());
        }
        
    </script>
</body>
</html>